<!--专业班次成绩单打印-->
<template>
  <div class="assessment-container">
    <div class="search-container" style="margin: 0; padding: 0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="queryParamsForm.xueqi"
            style="width: 100px"
            size="mini"
            placeholder="请选择"
            clearable
            @input="handleChangeXq"
          >
            <el-option
              v-for="(item, index) in xqList"
              :key="index"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>年级：</span>
          <el-select
            v-model="queryParamsForm.grade"
            style="width: 100px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in njList"
              :key="index"
              :label="item.xqszxn"
              :value="item.xqszxn"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="queryParamsForm.level"
            style="width: 100px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in pyccList"
              :key="index"
              :label="item.dictValue"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="queryParamsForm.studytypecode"
            style="width: 100px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" v-if="roleId != '1490880728751644674 '">
          <span>队别：</span>
          <el-select
            v-model="queryParamsForm.classes"
            style="width: 100px"
            size="mini"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in dbList"
              :key="index"
              :label="item.deptName"
              :value="item.deptName"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>专业班次：</span>
          <el-select
            v-model="specialtyName"
            size="mini"
            placeholder="请选择专业班次"
            style="width: 140px"
            clearable
            @input="handleChangePlan"
          >
            <el-option
              v-for="(item, index) in specialtyList"
              :key="index"
              :label="item.className"
              :value="index"
            >
            </el-option>
          </el-select>
        </div>
        <div
          class="search-button"
          style="margin: 2px 0 0 0"
          @click="zybcsearch"
        >
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span style="font-size: 14px">查询</span>
        </div>
      </div>
    </div>
    <div class="search-container-center">{{ specialtyInfo }}</div>
    <div class="table-container">
      <el-table
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="btname" :label="xueqiInfo" align="center">
          <el-table-column prop="studentcode" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="studentname" label="学员姓名" align="center">
          </el-table-column>
          <el-table-column
            v-if="tableData.length > 0"
            v-for="(item, index) in bxcourseList"
            :key="index"
            :label="item['bxcourse'+ index] != '' ? item['bxcourse'+ index] : ''" 
            align="center"
            :prop="'bxcourse'+index"
          >
          <template slot-scope="scope">
            <span>{{ item['bxscore'+ index] }}</span>
          </template>
          </el-table-column>
          <el-table-column 
            v-if="tableData.length > 0"
            v-for="(item, index) in xxcourseList"
            :key="index"
            :label="item['xxcourse'+index] != '' ? item['xxcourse'+index] + ' *' : ''" 
            align="center"
            :prop="'xxcourse'+index"
          >
            <template slot-scope="scope">
              <span>{{ item['xxscore'+index] }}</span>
              <!-- <div v-for="(item,index) in scope.row.xxcourse" key="index">
                <span>{{ scope.row.xxcourse[index].xxscore }}</span>
              </div> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="lProportion"
            label="平均学分绩点"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ 0 }}</span>
              <!-- <div v-for="(item,index) in scope.row.xxcourse" key="index">
                <span>{{ scope.row.xxcourse[index].xxscore }}</span>
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="avg" label="平均成绩" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          :name="xueqiInfo ? xueqiInfo + '-' + specialtyInfo + '.xls' : specialtyInfo + '.xls'"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="text">课程名称后加“*”为选修课</div>
    </div>
  </div>
</template>

<script>
import {
  reqGetXqList,
  reqCheckYearList,
  reqCheckLevelList,
  reqXydList,
  reqZybcList,
} from "@/api/admin1/check";
import { getStore } from '@/util/store.js'
import { zybcscroeprint } from "@/api/course/courses";

export default {
  data() {
    return {
      roleId: '',
      queryParamsForm: {
        xueqi: "",
        grade: "",
        level: "",
        studytypecode: "",
        classes: "",
        majorclass: "",
      },
      bxcourseList:[],
      xxcourseList:[],
      specialtyInfo: "",
      specialtyName:'',
      xqList: [],
      njList: [],
      pyccList: [],
      specialtyList: [],
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      dbList: [],
      v1: "",
      tableData: [],
      xueqiInfo: "",
      jsonFields:{
        '学号': 'studentcode',
        '学员姓名': 'studentname', 
        '平均学分绩点': 'lProportion',
        '平均成绩': 'avg'
      },
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id;
  },
  mounted() {
    this.termAll();
    this.reqCheckYearList();
    this.reqCheckLevelList();
    this.getlist();
    this.dbAll();
    this.zybcsearch();
  },
  methods: {
    // 获取学期下拉框
    async termAll() {
      const result = await reqGetXqList();
      result.data.code == 200 ? (this.xqList = result.data.data) : [];
    },
    //获取年级下拉框
    reqCheckYearList() {
      let that = this;
      reqCheckYearList().then((res) => {
        if (res.data.code == 200 && res.data.data) {
          that.njList = res.data.data;
          // that.grade = res.data.data[0].xqszxn;
        }
      });
    },
    //获取培养层次下拉框
    reqCheckLevelList() {
      let that = this;
      reqCheckLevelList().then((res) => {
        if (res.data.code == 200 && res.data.data) {
          that.pyccList = res.data.data[0].children;
          // that.traininglevel = res.data.data[0].children[0].dictValue;
        }
      });
    },
    // 获取队别下拉框
    async dbAll() {
      const result = await reqXydList();
      result.data.code == 200 ? (this.dbList = result.data.data) : [];
    },
    //获取专业班次
    async getlist() {
      const result = await reqZybcList();
      if(result.data.code == 200){
        this.specialtyList = result.data.data;
        this.specialtyName = result.data.data[0].className;
        this.specialtyInfo = result.data.data[0].className + '成绩单';
      }
      result.data.code == 200 ? this.specialtyList = result.data.data : [];
    },
    zybcsearch() {
      // this.specialtyInfo = this{}.queryParamsForm.majorclass;
      zybcscroeprint(this.queryParamsForm).then((res) => {
        // this.tableData = res.data.data;
        if(res.data.data.length > 0){
          this.tableData = res.data.data.map(function(item, index, arr) {
              const i = res.data.data.find(_item => item.studentcode === _item.studentcode);
              if(i !== item) {
                i.bxcourse.push(item.bxcourse);
                i.xxcourse.push(item.xxcourse);
                i.bxscore.push(item.bxscore);
                i.xxscore.push(item.xxscore);
                return undefined;
              } else {
                i.bxcourse = [i.bxcourse];
                i.xxcourse = [i.xxcourse];
                i.bxscore = [i.bxscore];
                i.xxscore = [i.xxscore];
                return i;
              }
          }).filter(item => item !== undefined);
          for(var i=0;i<this.tableData.length;i++){
            this.tableData[i].lProportion = '0';
            let options = [];
            for(var k=0;k<this.tableData[i].bxcourse.length;k++){
              let obj = {};
              obj['bxcourse' + k] = this.tableData[i].bxcourse[k];
              obj['bxscore' + k] = this.tableData[i].bxscore[k];
              options.push(obj);
            }
            let optionscore = [];
            for(var k=0;k<this.tableData[i].xxcourse.length;k++){
              let obj = {};
              obj['xxcourse' + k] = this.tableData[i].xxcourse[k];
              obj['xxscore' + k] = this.tableData[i].xxscore[k];
              optionscore.push(obj);
            }
            this.tableData[i].bxcourse = this.bxcourseList =  fun(options);
            this.tableData[i].xxcourse = this.xxcourseList =  funX(optionscore);
            // console.log(fun(options))
            for(var j=0;j<fun(options).length;j++){
              this.tableData[i]['bxcourse' + j] = fun(options)[j]['bxcourse' + j];
              this.tableData[i]['bxscore' + j] = fun(options)[j]['bxscore' + j];
            }
            for(var j=0;j<funX(optionscore).length;j++){
              this.tableData[i]['xxcourse' + j] = funX(optionscore)[j]['xxcourse' + j];
              this.tableData[i]['xxscore' + j] = funX(optionscore)[j]['xxscore' + j];
            }
            this.tableData[i].bxcourse.forEach((element,index) => {
              this.jsonFields[element['bxcourse'+index]] = "bxscore" + index;
            });
            this.tableData[i].xxcourse.forEach((element,index) => {
              this.jsonFields[element['xxcourse'+index]] = "xxscore" + index;
            });
          }
          function fun(arr){
            var obj = {};
            return arr = arr.reduce(function(item, next,index) {
              obj[next['bxcourse'+index]] ? '' : obj[next['bxcourse'+index]] = true && item.push(next);
              return item;
            }, []);
          }
          function funX(arr){
            var obj = {};
            return arr = arr.reduce(function(item, next,index) {
              obj[next['xxcourse'+index]] ? '' : obj[next['xxcourse'+index]] = true && item.push(next);
              return item;
            }, []);
          }
        } else {
          this.tableData = [];
        }
      });
    },
    //选择专业班次事件
    handleChangePlan(index) {
      if(index){
        this.specialtyName = this.specialtyList[index].className;
        this.specialtyInfo = this.specialtyList[index].className + '成绩单';
        this.queryParamsForm.majorclass = this.specialtyList[index].id;
      } else {
        this.specialtyInfo = '';
        this.specialtyName = '';
        this.queryParamsForm.majorclass = ''
      }
    },
    //学期选择事件
    handleChangeXq(val) {
      this.xueqiInfo = val;
    },
  },
};
</script>
<style lang="less" scoped>
@fontFamily: "Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  // margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.assessment-container {
  // width: 1875px;
  margin: 0 auto;
  .search-container {
    margin-top: 27px;
    padding-left: 43px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .search-container-left,
    .search-container-right {
      display: flex;
      flex-direction: row;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
  .bottom-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .export-button {
      cursor: pointer;
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      // margin: 0 50px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      // margin: 0 50px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
  .plan-entry-table-container {
    margin-top: 15px;
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
  .search-container-center {
    width: 100%;
    height: 64px;
    background: #86aad7;
    opacity: 0.3;
    border-radius: 5px 5px 0px 0px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 39px;
    opacity: 1;
    color: #004ca7;
    margin-top: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.table-container {
  margin: 15px auto;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    // border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #80aeee;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
    border-bottom: 1px solid #4f9af1;

    height: 46px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
// @import "../../../styles/supervision.less";
.wrapper-container {
  width: 100%;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
/deep/ .cell {
  white-space: nowrap;
}
</style>